<template>
  <div class="box">
    <van-icon class="registeredicon" name="cross" size="30px" @click="returnHome" />
    <h2>手机号码登录/注册</h2>
    <div class="tel">
      <!-- 输入手机号，调起手机号键盘 -->
      <span>
        中国+86
        <van-icon name="arrow-down" />
      </span>
      <input type="text" v-model="tel" />
    </div>
    <div class="login-r">
      <span>登录遇见问题</span>
    </div>
    <van-field
      v-model="sms"
      center
      clearable
      label="短信验证码"
      type="digit"
      placeholder="请输入短信验证码"
      maxlength="6"
    >
      <van-button slot="button" block size="small" :disabled="isCountDownVisible" @click="sendCode">
        <van-count-down
          v-if="isCountDownVisible"
          :time="time"
          format="剩余 ss 秒重发"
          @finish="countDownFinish"
        />
        <span v-else>发送验证码</span>
      </van-button>
    </van-field>
    <div class="btn">
      <van-button
        round
        type="warning"
        size="large"
        :disabled="!sms || sms.length !== 6"
        @click="login"
      >登录</van-button>
    </div>
    <div class="login-c">
      <span>未注册的手机号验证后自动注册</span>
    </div>
    <div class="account">
      <van-divider>第三方账号登录</van-divider>
    </div>
    <div class="TencentIcon">
      <div class="TencentIcon_l">
        <span></span>
        <p>微信</p>
      </div>
      <div class="TencentIcon_r">
        <span></span>
        <p>QQ</p>
      </div>
    </div>
    <div class="footer">
      <div>
        登录即代表同意
        <a href>《用户服务协议》</a>与
        <a href>《隐私政策》</a>等,
        <span>接受免除或者限制责任，肃宗管辖约定</span>等粗体或下划线标示条款。
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tel: "",
      time: 60 * 1000,
      sms: "",
      isCountDownVisible: false,
      queryData: {}
    };
  },
  methods: {
    returnHome() {
      this.$router.go(-1);
    },
    countDownFinish() {
      this.isCountDownVisible = false;
    },
    async sendCode() {
      const { data: res } = await this.$http.post("/api/user/send4Login", {
        phone: this.tel
      });
      if (res.code !== 20000) {
        return this.$toast.fail("登录失败");
      }
      this.isCountDownVisible = true;
      this.$toast.success("发送成功");
    },
    countDownFinish() {
      this.isCountDownVisible = false;
    },
    async login() {
      const { data: res } = await this.$http.post("/api/user/login", {
        phone: this.tel,
        code: this.sms
      });
      if (res.code !== 20000) {
        return this.$toast.fail("登录失败");
      }
      this.$toast.success("发送成功");
      // 登录成功跳转
      this.$router.push({
        path: this.fromRoute || "/home",
        query: this.queryData
      });
    }
  }
};
</script>
<style lang="less" scoped>
.box .registeredicon {
  margin: 40px 0 20px 20px;
}
.box h2 {
  margin-left: 20px;
}
.tel {
  margin: 40px 20px 0 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.tel .van-icon {
  margin-right: 6px;
}
.tel input {
  border: 0;
}
.login-r {
  margin-left: 256px;
  font-size: 16px;
  margin-top: 8px;
  color: #ccc;
}
.btn {
  margin: 20px 20px 10px 20px;
}

.van-button--warning {
  color: #fff;
  background-color: #ffce00;
  border: 1px solid #ffce00;
}
.login-c {
  text-align: center;
  font-size: 14px;
  color: #bbb;
}
.account {
  margin: 40px 20px 10px 20px;
}
.TencentIcon {
  margin-top: 30px;
  height: 120px;
  padding: 0 20px 0 50px;
  align-items: center;
}
.TencentIcon p {
  margin: 0;
}
.TencentIcon_l {
  float: left;
  display: block;
  width: 100px;
  height: 100px;
  text-align: center;
  margin-right: 50px;
}
.TencentIcon_l span {
  display: block;
  width: 60px;
  height: 60px;
  border: 1px solid #eee;
  border-radius: 50%;
  margin-left: 22px;
  background: url(../assets/images/weixin.png) 10px 13px no-repeat;
  background-size: 40px;
}

.TencentIcon_r {
  float: left;
  display: block;
  width: 100px;
  height: 100px;
  text-align: center;
}
.TencentIcon_r span {
  display: block;
  width: 60px;
  height: 60px;
  border: 1px solid #eee;
  border-radius: 50px;
  margin-left: 20px;
  background: url(../assets/images/QQ.png) 18px 16px no-repeat;
  background-size: 25px;
}

.footer {
  margin: 12px 20px;
  text-align: center;
  font-size: 12px;
  color: #bbb;
}
.footer a {
  color: orangered;
}
.footer span {
  font-weight: 700;
  text-decoration: underline;
}
</style>
